<template>
	<view>
		<view v-if='!isLogin'>
			<view style='padding:20px;' @click='toUrl("/pages/index/login")'>
				<u-row>
					<u-col span='2'>
						<view>
							<u-avatar text="中"></u-avatar>
						</view>
					</u-col>
					<u-col span='10'>
						<view style='color:#909399;font-size:18px;font-weight: bold;'>
							<text>登录/注册</text>
						</view>
					</u-col>
				</u-row>
			</view>
		</view>
		<view v-else>
			<view>
				<view class='top'>
					<u-row align='top'>
						<u-col :span='6'>
							<view>
								<view style='color:#f3f3f3'>钱包余额(元)</view>
								<view style='font-size:32px;padding-top:5px;color:#fff'>
									<text style='font-size:20px'>￥</text> {{amount}}
								</view>
							</view>
						</u-col>
						<u-col :span='6'>
						</u-col>
					</u-row>
					<view style='padding-top:20px'>
						<u-row>
							<u-col :span='8'>
							</u-col>
							<u-col :span='4'>
								<view>
									<u-button @click='toUrl("/pages/mine/withdrawal")' type='success' text='提现' shape='circle' size='large' :plain='true'></u-button>
								</view>
							</u-col>
						</u-row>
					</view>
				</view>
				<view style='padding:20px 10px;color：#fff;font-weight: bold;'>
					<u-row>
						<u-col span='6'>
							<view class='btn-left'>
								<u-row @click='toUrl("/pages/mine/balance-logs")'>
									<u-col span='4'>
										<u-avatar
											src="https://picture.jmgc.vip/02726e69-2576-462f-8c12-bce97868a097.png"></u-avatar>
									</u-col>
									<u-col span='6'>
										<view style='color:#fff'>账单明细</view>
									</u-col>
									<u-col span='2'>
										<u-icon name="arrow-right" color='#fff'></u-icon>
									</u-col>
								</u-row>
							</view>
						</u-col>
						<u-col span='6'>
							<view class='btn-right'>
								<u-row @click='toUrl("/pages/mine/withdrawal-logs")'>
									<u-col span='4'>
										<u-avatar
											src="https://picture.jmgc.vip/93e056ac-b715-438e-9b08-9a50602d35d2.png"></u-avatar>
									</u-col>
									<u-col span='6'>
										<view style='color:#fff'>提现记录</view>
									</u-col>
									<u-col span='2'>
										<u-icon name="arrow-right" color='#fff'></u-icon>
									</u-col>
								</u-row>
							</view>
						</u-col>
					</u-row>
				</view>
				<!-- <view style='padding:0px 10px' @click='toUrl("/pages/mine/bank-card")'>
					<u-row>
						<u-col span='8'>
							<view style='font-size:20px;color:#606266;font-weight: bold;'>提现银行卡
							</view>
						</u-col>
						<u-col span='4'>
							<view style='float: right;'>
								<u-icon name="arrow-right" color='#909399' size='22'></u-icon>
							</view> 
						</u-col>
					</u-row>
					<view style='padding-top:20px'>
						<view v-if='bankCard != ""'>
							<view style='padding:20px 10px;background-color: #3E73D3;color:#fff;border-radius: 10px;'>
								<u-row>
									<u-col span='2'>
										<u-avatar
											src="https://picture.jmgc.vip/272f2132-1936-4d67-b1f0-1101b5aa732e.png"></u-avatar>
									</u-col>
									<u-col span='10'>
										<view style='text-align: left;font-weight: bold;'>
											{{bankCard.bankName}}
										</view>
										<view style='text-align: left;'>
											{{bankCard.no}}
										</view>
									</u-col>
								</u-row>
							</view>
						</view>
						<view v-else>
							<view stype='padding:20px 10px'>
								<view
									style='padding:20px 10px;text-align: center;border: solid #909399 1px;border-radius: 10px;'>
									立即绑定</view>
							</view>
						</view>
					</view>
				</view> -->
			</view>
			<view style='padding-top:20px'>
				<u-cell-group>
						<u-cell title="报名记录" :value="activityRecordCount" :isLink='true' @click='toUrl("/pages/mine/activity-record")'></u-cell>
						<u-cell title="退出登录"  :isLink='true' @click='loginOut'></u-cell>
					</u-cell-group>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isLogin: false,
				amount: 0,
				bankCard: '',
				activityRecordCount: 0
			}
		},
		onLoad() {

		},
		onShow() {
			let token = uni.getStorageSync('api_token')
			if(token != ''){
				this.isLogin = true
				this.request.get(`api/balances`).then((res) => {
					console.log('balance',res)
					if(res.data && res.data.amount){
						this.amount = res.data.amount
					}
				})
				this.request.get(`api/activity-records`,{
					limit: 1
				}).then((res) => {
					console.log(123,res)
					if(res.data){
						this.activityRecordCount = res.paginator.totalCount
					}
				})
			}
			let carts = uni.getStorageSync('carts')
			if(carts != ''){
				this.carts = carts
				uni.setTabBarBadge({
					index: 2,
					text: `${carts.length}`
				})
			}else{
				uni.removeTabBarBadge({
					index:2
				})
			}
			
		},
		methods: {
			toUrl(page){
				uni.navigateTo({
					url: page
				})
			},
			loginOut(){
				uni.showModal({
					title: '',
					content: '是否确定退出登录？',
					success: (data) => {
						if(data.confirm){
							uni.removeStorageSync('api_token')
							this.isLogin = false
						}
					}
				})
			}
		}
	}
</script>

<style>
	.btn-left{
		background-color:#239965;
		border-radius: 15px;
		margin-right:5px;
		padding:10px;
		border: solid #f3f3f3 1px;
	}
	.btn-right{
		background-color:#239965;
		border-radius: 15px;
		margin-left:5px;
		padding:10px;
		border: solid #f3f3f3 1px;
	}
	.content{
		background-color: #f3f3f3;
		color: #909399;
		min-height: 100vh;
		overflow: auto;
	}
	.top {
		background: linear-gradient(to bottom, #239965, #71d5a1);
		padding: 20px 15px;
		// margin: 10px 10px 0px 10px;
		border-radius: 0px 0px 10px 10px;
		color: #fff;
	}
</style>
